學習所有語言首先永遠是跟世界打招呼
目的在於確立開發環境的建立是否成功
以往iOS或Android開發的第一步
都是先下載IDE
而開發Flutter必須是先下載SDK⚠️⚠️⚠️(請往這邊走)
如果要看歷史版本就去那邊
PS.新讀者可能不知道,只要看到⚠️⚠️⚠️就代表跟iOS開發有不太一樣的地方,做為提醒
本課程使用的SDK版本:stable 1.17.5
選個你喜歡的地方解壓縮
開啟terminal 輸入以下指令
export PATH=$PATH:{剛剛解壓縮的資料夾}/bin
//例如
export PATH=$PATH:/Users/MarkFly/Documents/code/Flutter/flutterSDK/bin
PS. 為什麼這邊一定要用export 用cd就不行呢?...
PS2. 小訣竅:在快顯功能表按住option會有拷貝路徑的選項
執行flutter doctor(這名字取得真好XD)
然後醫生就會跟你說你哪邊不行(各位男士別想歪www)
例如以我的AS來說
就還需要裝Flutter跟Dart的plugin
把缺的外掛補上(裝Flutter的時候就會問你要不要順便裝Dart了)
記~得~重~啟~IDE
用人家的東西就同意一下人家的條款
flutter doctor --android-licenses
回診!
沒有紅色叉叉應該就可以了(我們不用VSCode開發就不管他)
可以看到啟動頁已經有Flutter專案的選項囉
先選第一個
其他選項離現在的我們還很遙遠
專案名稱只能小寫(每次看到這種要求就覺得很不爽>"<)
最後一步
複習一下package name就是我們的bundle id☘️☘️☘️
然後我androidX是有勾啦
PS.新讀者可能不知道,只要看到☘️☘️☘️就代表跟iOS開發有類似的地方,做為提醒
專案建好後
可以看到右上角有選擇裝置的地方
選好後可以按綠色三角形去run
看到AS可以跑iPhone模擬器感覺很新奇XDDDD
跟iOS或Android都不一樣
新專案一建立就會有個現成的小Demo⚠️⚠️⚠️
程式的進入點在main.dart檔裡面的main function
至於裡面寫了什麼呢
我們之後再慢慢研究
今天先來體驗一下Hot Reload
套一句強國RN的話XDDDD
「別再傻等編譯了!」
順便介紹一個我覺得很有意思的語法:字串可以乘以整數代表重複幾次
把
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
改成
Text("是在哈囉\n" * _counter),
然後輕輕地按下command+S
你會發現模擬器立馬有了變化
你按幾下它就哈囉幾次XDDD
那是因為Flutter hot reload只會重新渲染畫面
變數並不會重新初始化
如果你想要每次刷新都從零開始
可以在_MyHomePageState裡面加上這段程式碼
@override
void reassemble() {
super.reassemble();
_counter = 0;
}
就找醫生吧(flutter doctor)
照著醫囑做就對了
//例如會有如下指示
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
...重開一下就好了(翻桌!!!)
本集內容Android版請見:iOS Developer Learning Android. Lesson 02
下集預告:icon & launch